<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside :class="['sidebar-container', { 'is-collapse': isCollapse }]">
      <Sidebar :isCollapse="isCollapse" @toggle-collapse="toggleCollapse" />
    </el-aside>

    <el-container>
      <!-- 头部区域 -->
      <el-header class="header-container">
        <Header :collapse="isCollapse" @toggle-collapse="toggleCollapse" />
      </el-header>

      <!-- 内容区域 -->
      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="keepAliveComponents">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'

// 侧边栏折叠状态
const isCollapse = ref(false)

// 需要缓存的组件名列表（根据路由meta配置动态获取）
const keepAliveComponents = ref([])

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理窗口大小变化
function handleResize() {
  if (window.innerWidth < 768) {
    isCollapse.value = true; // 在小屏幕上默认折叠侧边栏
  } else {
    isCollapse.value = false; // 在大屏幕上默认展开侧边栏
  }
}

onMounted(() => {
  handleResize(); // 初始化时设置状态
  window.addEventListener('resize', handleResize); // 添加事件监听器
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize); // 移除事件监听器
})
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  display: flex;

  .header-container {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); // 添加阴影提升视觉效果
  }

  .main-container {
    padding: 20px;
    background: #f0f2f5;
    flex: 1; // 让内容区域占据剩余空间
    overflow: auto; // 确保内容过多时可以滚动
  }

  .sidebar-container {
    transition: width 0.3s;
    overflow: hidden;
    width: 200px; // 默认宽度
  }

  // 媒体查询，适用于小屏幕设备
  @media (max-width: 768px) {
    flex-direction: column; // 在小屏幕上改为垂直布局

    .sidebar-container {
      position: fixed; // 固定位置以便于切换显示/隐藏
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 1020;
      width: 100% !important; // 覆盖默认宽度
      transform: translateX(-100%); // 默认隐藏

      &.is-collapse {
        transform: translateX(0); // 显示时的位置
      }
    }

    .el-header {
      display: block; // 使头部区域变为块级元素，以适应小屏幕
      padding: 0 10px; // 减少内边距
    }

    .main-container {
      padding: 10px; // 减少内容区域的内边距，以适应小屏幕
      margin-top: 60px; // 头部高度
      margin-left: 0 !important; // 移除左侧间距
    }
  }
}

// 动画效果
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from,
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>